<html>
<body>
<textarea id="testarea"></textarea>
<script>
var textarea = document.getElementById("testarea");
textarea.onkeyup = function() {
  var lines = textarea.value.split("\n");
  for (var i = 0; i < lines.length; i++) {
    if (lines[i].length <= 6) continue;
    var j = 0;
    space = 6;
    /*while (j++ <= 6) {
      if (lines[i].charAt(j) === " ") space = j;
    }*/
    lines[i + 1] = lines[i].substring(space ) + (lines[i + 1] || "");
    lines[i] = lines[i].substring(0, space);
  }
  textarea.value = lines.slice(0, 4).join("\n");
};
</script><style>
#testarea {
  resize: none;
  width: 300px;
  height: 232px;
  font-size: 16px;
  line-height: 1.45;
}

.btn {
  cursor: pointer;
  display: inline-block;
  background: green;
  padding: 10px;
}
</style>

<br>
<div>
  <button class="btn" type="button" onclick="myFunction()">Comic Sans</button>
</div>

<div>
  <button class="btn" type="button" onclick="myFunction_2()">Reset</button>
</div>
<div>
<img alt="" src="back.jpg" width="500" height="300"/>
</div>
<script>
  function myFunction() {
    document.getElementById("testarea").style.font = "italic bold 25px Comic Sans MS, Comic Sans MS, Comic Sans, cursive";
  }
</script>

<script>
  function myFunction_2() {
    document.getElementById("testarea").style.font = "italic normal 16px Arial, Helvetica, sans-serif";
  }
</script></body><html>